<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="历史行程" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<view class="sticky" :style="{'top':showNavTop+'px'}">
			<view class="uni-flex p030 ac">
				<view class="flex1"><uni-search-bar v-model="param.keyword" class="uni-mt-10 tl" radius="5" placeholder="请输入历史行程" clearButton="auto" cancelButton="none"></uni-search-bar></view>
				<button class="mini-btn" type="primary" size="mini" @confirm="search">查询</button>
			</view>
		</view>
		<scroll-view scroll-y="true" scroll-x="false" :style="{height:scrollH+'px'}" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
		<view class="pt30 pb130 uni-padding-wrap">
			<view class="card-list uni-flex p3020 bor_e8" v-for="item in List" @tap="navigatePage(item.id)">
				<image :src="item.coverUrl"></image>
				<view class="card-item flex1">
					<view class="uni-flex">
						<view class="">{{item.itineraryTitle}}</view>
						<view class="">
							<text class="sign-status uni-warning" v-if="item.itinerarySta == 'ZT'">组队中</text>
							<text class="sign-status uni-success" v-if="item.itinerarySta == 'W'">待出行</text>
							<text class="sign-status uni-primary" v-if="item.itinerarySta == 'I'">出行中</text>
							<text class="sign-status uni-default" v-if="item.itinerarySta == 'O'">已完成</text>
							<text class="sign-status uni-default" v-if="item.itinerarySta == 'X'">已取消</text>
						</view>
					</view>
					<view class="">
						<text>{{item.linesCityDesc}}&nbsp;&nbsp;{{item.collectDate}}</text>
					</view>
				</view>
			</view>
			<!-- 加载提示 -->
			 <view v-if="isLoading" class="tc mt100 mb100">{{loadMoreText}}</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	export default {
		components: {
			// uPicker
		},
		data() {
			return {
				navTop: 40,
				showNavTop:88,
				starValue:0,
				maxStar:5,
				datetimesingle: '',
				scrollH:0,
				isRefreshing:false,
				isLoading:false,
				loadMoreText:"加载中...",
				List:[],
				param: {
					page: 1, //当前页
					limit: 10, //每页显示记录数
					PageCount: 0,
					pageType:"HISTORY",
					keyword:"",
				},
			}
		},
		computed: {
			
		},
		watch: {

		},
		onShow() {
			// let userLoginFlag = storageUtil.getStorageData("isLogin");
			// if (userLoginFlag) {
			// 	this.getOrders();
			// }
		},
		onReady() {
			// 获取可滚动区域的高度：视口高度 - tabbar切换卡高度就是剩余的内容可滚动的。
			//如果你使用取消了原生导航栏，记着把你自定义导航栏的高度也减掉哦
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(80)
				}
			})
		},
		onLoad(option) {
			const app = getApp()
			this.navTop = app.globalData.navTop;
			this.showNavTop = this.navTop + 44;
			this.getPageList('onPullDownRefresh');
		},
		mounted(){
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			checkIsLogin() {
				let userLoginFlag = storageUtil.getStorageData("isLogin");
				if (!userLoginFlag || userLoginFlag == '') {
					this.popShowHandle();
					return;
				}
			},
			// 星级点击事件
			starChange:function(e){
				this.starValue+1;
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			navigatePage(ID){
				this.GetDetailInfo(ID);
			},
			GetDetailInfo(ID) {
				let _this = this;
				api.getItineraryInfo({
					params: {
						itineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						_this.Data = res.data;
						_this.navgetTo('pages/schdule/schdule_detail',ID);
					} else {}
				}).catch()
			},
			onRefresh() {  // 下拉刷新
				this.isRefreshing = true;
				this.param.page = 1;
				this.getPageList('onPullDownRefresh');
			},
			onLoadMore() {  // 上拉加载
				if (this.isLoading) return;
				this.isLoading = true;
				this.param.page = (this.param.page + 1);
				if (this.param.page > this.param.PageCount) {
					this.isLoading = true;
					this.loadMoreText = "--到底啦--"
					return;
				}
				this.getPageList('onReachBottom');
			},
			search(){
				this.getPageList('onPullDownRefresh');
			},
			// 获取分页列表
			getPageList(type) {
				let _this = this;
				let requestData = {
					params: { 
						page: _this.param.page, //当前页
						size: _this.param.limit, //每页显示记录数
						pageType:_this.param.pageType, //后端区分是行程首页还是历史行程
						keyword:_this.param.keyword,	
					}
				}
				api.getHistoryPageList(requestData).then(res => {
					if (res.code === 0) {
						if (res.data.length > 0) {
							let pagelist = res.data;
							_this.param.PageCount = Math.ceil(res.data.total / _this.param.limit);
							if (type == "onReachBottom") {
								_this.List = _this.List.concat(pagelist)
							} else {
								_this.List = pagelist;
							}
						}else{
							if(type == "onPullDownRefresh"){
								_this.List = [];
							}else if(type == "onReachBottom"){
								this.loadMoreText = "--到底啦--"
							}
						}
					} else {}
				_this.isRefreshing = false;
				_this.loadMoreText = "";
				}).catch(function(){
					_this.isRefreshing = false;
					_this.loadMoreText = "";
				})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
		padding-top: 44px;
		overflow: hidden;
	}

	.index-swiper {
		width: 100%;
		height: 670rpx;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.bottom-wrap{
		position: relative;
		top: -60rpx;
	}
	
	.is-flex{
		display: flex;
		align-items: center;
	}
	
	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}
	.sticky {
		height: 85rpx;
		line-height: 85rpx;
		background-color: #ffffff;
		width: 100%;
		color: #888;
		position: fixed;
		top: 44px;
		left: 0;
		right: 0;
		z-index: 999;
		text-align: center;
	}

	.sticky text {
		color: $uni-text-color-light-blue;
		font-weight: bold;
		padding: 10rpx 15rpx;
	}
	.sticky text.active{
		color: $uni-text-color-blue;
		border-bottom: 2px solid $uni-text-color-blue;
	}
	.card-list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		image{
			width: 170rpx;
			height: 245rpx;
			border-radius: 20rpx;
		}
		.card-item{
			margin-left: 25rpx;
		}
		.card-item text{
			display: inline-block;
		}
	}
	.pb130{
		padding-bottom: calc( 130rpx + max(env(safe-area-inset-bottom),20px));
	}
	.sign-status{
		font-size: 26rpx;
		// color: #888;
		border: 1px solid #888;
		border-radius: 10rpx;
		padding: 0 15rpx;
		margin-bottom: 15rpx;
	}
	.sign-status.uni-warning{
		color: $uni-text-color-orange;
		border: 1px solid $uni-text-color-orange;
	}
	.sign-status.uni-success{
		color: $uni-text-color-green;
		border: 1px solid $uni-text-color-green;
	}
	.sign-status.uni-primary{
		color: $uni-text-color-blue;
		border: 1px solid $uni-text-color-blue;
	}
	.sign-status.uni-default{
		color: #000;
		border: 1px solid #888;
	}
	.share-reward{
		.color-black{
			display: block;
			margin-bottom: 20rpx;
		}
		.is-flex{
			align-items: flex-start;
		}
		.color-gray{
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}
	
</style>